<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
            <!-- 复选框 -->
            <div id='example-3'>
                    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
                    <label for="jack">Jack</label>
                    <input type="checkbox" id="john" value="John" v-model="checkedNames">
                    <label for="john">John</label>
                    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
                    <label for="mike">Mike</label>
                    <br>
                    <span>Checked names: {{ checkedNames }}</span>
            </div>
           <!-- 单选框 -->
            <div id="example-4">
                    <input type="radio" id="one" value="One" v-model="picked">
                    <label for="one">One</label>
                    <br>
                    <input type="radio" id="two" value="Two" v-model="picked">
                    <label for="two">Two</label>
                    <br>
                    <span>Picked: {{ picked }}</span>
            </div>
            <!-- 下拉列表 -->
            <select v-model="selected">
                    <option v-for="option in options" v-bind:value="option.value">
                      {{ option.text }}
                    </option>
                  </select>
           <span>Selected: {{ selected }}</span>
           <!-- 组件 -->

    </div>
</body>
<script>
Vue.component('blog-post', {
  props: ['post'],
  template: `
    <div class="blog-post">
      <h3>{{ post.title }}</h3>
      <button>
        Enlarge text
      </button>
      <div v-html="post.content"></div>
    </div>
  `
})
var vm=new Vue({
 el:"#app",
 data:{
    checkedNames:[],
    picked:"",
    selected: 'A',
    
 }
 
});

</script>
</html>